<div class="mixerMaterials" id="mixerMaterials" style="height:100%">
	<div class="ui-layout-center scrollable" id="reportHolder">
        <div class="A4 p_1 portrait">
            <div class="column w100">
		        <h1>packaging - technical changeovers</h1>    
		    </div>
		    <div class="column w25">
		        <table class="header-data w100">
		            <tr>
		                <td class="w25 left">For</td>
		                <td class="w75" id="reportForDate"></td>
		            </tr>
		            <tr>
		                <td class="w25 left">Entries</td>
		                <td class="w75">---</td>
		            </tr>
		            <tr>
		                <td class="w25 left">User</td>
		                <td class="w75" id="reportUser"></td>
		            </tr>
		            <tr>
		                <td class="w25 left">Data</td>
		                <td class="w75" id="reportTime"></td>
		            </tr>
		            <tr>
		                <td class="w25 left">Pages</td>
		                <td class="w75" id="reportPage"></td>
		            </tr>
		        </table>
		    </div>
            <div class="column w75">
                <div class="column w100 np" style="height: 95px;">
                    <hr>
                    <div class="column np w25">
                        <span>Notes</span>
                    </div>
                    <div class="column np w75 text-right">
                        <span>Dr. Oetker Canada Ltd.</span>
                    </div>
                </div>
            </div>
            <div class="column w100 np">
                <div class="column w25">
                    <hr>
                </div>
                <div class="column w75">
                    <hr>    
                </div>
            </div>
			<div class="column w100 mainTable">
			</div> 
		</div>
	</div>
    <div id="timeFilter_holder" class="clearfix ui-layout-south">
    </div>
</div>
<script>
   	mixerMaterialsFX = function() {
        var _self = this;
        _self.perform = function() {
            $(".mixerMaterials").layout({
                resizable: false,
                closable: false,
                south__size: "120"
            });

            $('.datepicker.hook_day').datepicker({
                defaultDate: new Date(),
                dateFormat: 'd.m.yy'
            }).datepicker('setDate', new Date());

            $("#timeFilter_holder").load("_parts/TimeFilter.html?x="+Math.random(), function() {
                $('.datepicker.hook_dateFrom').datepicker({
                    defaultDate: '-3m',
                    dateFormat: 'd.m.yy'
                }).datepicker('setDate', '-3m');
                $('.datepicker.hook_dateTo').datepicker({
                    defaultDate: new Date(),
                    dateFormat: 'd.m.yy'
                }).datepicker('setDate', new Date());

                _self.loadYearsForTimeFilter();

                $("#mixerEditTable").addScroll();
                $("#mixerTableHolder").addScroll();
                $("#pickingTableHolder").addScroll();
                $(".timeFilter #row1 .col5").remove();
                $(".timeFilter #row2 .col5").remove();
                $(".timeFilter #row3 .col5").remove();
            });
        };
        _self.loadYearsForTimeFilter = function(callback) {
            $.getJSON(window.CONSTANTS.SERVICE_URL, {
                request: 120,
                action: 'getYears'
            },
            function(response) {
                $.each(response, function(index, value) {
                    $(".timeFilter .hook_yYear").append("<option>" + value.availableYear + "</option>");
                    $(".timeFilter .hook_mYear").append("<option>" + value.availableYear + "</option>");
                });
                if (callback) {
                    callback();
                }
            });
        };
        _self.refresh = function() {
            $("body").css('cursor', 'wait');

            var params = {};
            var type = $(".timeFilter .radio:checked").data('type');

            if (parseInt($('.timeFilter .hook_line').val()) > 0) {
                params.line = $('.timeFilter .hook_line').val();
            }

            switch (type) {
                case 'period':
                    params.pStart = $('.timeFilter .hook_dateFrom').val();
                    if ($('.timeFilter .hook_oneDay').is(":checked")) {
                        params.pOneDay = 'oneDay';
                    } else {
                        params.pEnd = $('.timeFilter .hook_dateTo').val();
                    }
                    params.timeFrame = 'period';
                    break;
                case 'month':
                    params.mMonth = $('.timeFilter .hook_mMonth').val();
                    params.mYear = $('.timeFilter .hook_mYear').val();
                    params.timeFrame = 'month';
                    break;
                case 'year':
                    params.yYear = $('.timeFilter .hook_yYear').val();
                    params.timeFrame = 'year';
                    break;
            };

            params.user="John Doe";
            params.request= 120;
            params.dataType= "json";

            reportBuilder.buildMxerMaterialsReport(params,function() {
                $("body").css('cursor', 'default');
            });
        };

        _self.printReport = function() {
        	reportBuilder.printReport();
        };

        _self.assignEventHandlers = function() {
            $(document).on("click", ".timeFilter button.refresh", function() {
                _self.refresh();
            });

            $(document).on("click", ".timeFilter button.export", function() {
                _self.printReport();
            });
        };
        _self.clearEventHandlers = function(){
            $(document).off("click", ".timeFilter button.refresh");

            $(document).off("click", ".timeFilter button.export");
        };
    };
    if(!window.mMaterialsFX){
        window.mMaterialsFX = new mixerMaterialsFX();
        window.mMaterialsFX.perform();
        window.mMaterialsFX.clearEventHandlers();
        window.mMaterialsFX.assignEventHandlers();
    }
    else{
        window.mMaterialsFX.perform();
        window.mMaterialsFX.clearEventHandlers();
        window.mMaterialsFX.assignEventHandlers();
    }
</script>